<template>
<div v-loading="loading" class="dashboard-container">
    <div class="app-container">
        <!-- 工具栏 -->
        <page-tools :show-before="true">
            <!-- 前面内容 -->
            <template v-slot:before>有 {{ attendInfo.tobeTaskCount }} 条考勤审批尚未处理</template>
            <template v-slot:after>
                <el-button size="mini" type="danger" @click="$router.push('/import?type=attendance')">导入</el-button>
                <el-button size="mini" type="warning">提醒</el-button>
                <el-button size="mini" type="primary" @click="handleSet">设置</el-button>
                <el-button size="mini" type="default" @click="$router.push('/attendances/archiving/')">历史归档</el-button>
                <el-button size="mini" type="primary" @click="$router.push({'path':'/attendances/report/'+ yearMonth})">{{ yearMonth }}报表</el-button>
            </template>
        </page-tools>
        <el-card class="hr-block">
            <el-form
                ref="formData"
                :model="formData"
                label-width="120px"
                class="formInfo"
            >
                <el-form-item label="部门:">
                    <el-checkbox-group v-model="formData.deptID">
                        <el-checkbox
                            v-for="item in departments"
                            :key="item.id"
                            :label="item.name"
                        >
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="考勤状态：">
                    <el-radio-group v-model="formData.stateID">
                        <el-radio
                            v-for="item in stateData.holidayType"
                            :key="item.id"
                            :label="item.value"
                            :value="item.value"
                        >
                            {{ item.value }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </el-card>
        <!-- 考勤数据 -->
        <el-card class="hr-block">
            <!-- 考勤列表 -->
            <div style="width:100%;position: relative;overflow-x: auto; overflow-y: hidden;">
                <div style="width: 3000px;">
                    <table
                        border="0"
                        align="center"
                        cellpadding="0"
                        cellspacing="0"
                        class="tableInfo"
                    >
                        <tr>
                            <th width="50">序号</th>
                            <th width="100">姓名</th>
                            <th width="100">工号</th>
                            <th width="200">部门</th>
                            <th width="100">手机</th>
                            <th v-for="(it, ind) in monthOfReport" :key="ind" width="110">{{ attendInfo.month }}/{{ ind + 1 }}</th>
                        </tr>
                        <tr v-for="(item, index) in list" :key="item.id">
                            <td width="50">{{ index }}</td>
                            <td width="100">{{ item.username }}</td>
                            <td width="100">{{ item.workNumber }}</td>
                            <td width="200">{{ item.departmentName }}</td>
                            <td width="100">{{ item.mobile }}</td>
                            <td
                                v-for="(it,ind) in item.attendanceRecord"
                                :key="ind"
                                width="110"
                                @click="showChangeDialog(item,ind,it)"
                            >
                                <span v-if="it.adtStatu===1">√</span>
                                <span v-if="it.adtStatu===2">旷工</span>
                                <span v-if="it.adtStatu===3">迟到</span>
                                <span v-if="it.adtStatu===4">早退</span>
                                <span v-if="it.adtStatu===5">外出</span>
                                <span v-if="it.adtStatu===6">出差</span>
                                <span v-if="it.adtStatu===7">年假</span>
                                <span v-if="it.adtStatu===8">事假</span>
                                <span v-if="it.adtStatu===9">病假</span>
                                <span v-if="it.adtStatu===10">婚假</span>
                                <span v-if="it.adtStatu===11">丧假</span>
                                <span v-if="it.adtStatu===12">产假</span>
                                <span v-if="it.adtStatu===13">奖励产假</span>
                                <span v-if="it.adtStatu===14">陪产假</span>
                                <span v-if="it.adtStatu===15">探亲假</span>
                                <span v-if="it.adtStatu===16">工伤假</span>
                                <span v-if="it.adtStatu===17">调休</span>
                                <span v-if="it.adtStatu===18">产检假</span>
                                <span v-if="it.adtStatu===19">流产假2</span>
                                <span v-if="it.adtStatu===20">长期病假</span>
                                <span v-if="it.adtStatu===21">测试架</span>
                                <span v-if="it.adtStatu===22">补签</span>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
            <el-dialog
                :visible.sync="centerDialogVisible"
                width="30%"
                center
            >
                <span slot="title" style="color:#fff;">{{ attendInfo.name }} {{ attendInfo.month }}/{{ attendInfo.getDate }}（实际工作日考勤方案）</span>
                <div class="attenInfo">
                    <p class="colRed">注：统计考勤时，异常状态优先正常状态</p>
                    <p class="check">
                        <el-radio-group v-model="modifyData.adtStatu">
                            <el-radio
                                v-for="item in stateData.vacationtype"
                                :key="item.id"
                                :label="item.id"
                                :value="item.name"
                            >{{ item.name }}</el-radio>
                        </el-radio-group></p>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="btnOK">确定</el-button>
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                </span>
            </el-dialog>
            <!-- 分页组件 -->
            <el-row
                type="flex"
                align="middle"
                justify="center"
                style="height: 60px"
            >
                <el-pagination
                    :page-size="page.pagesize"
                    :current-page="page.page"
                    layout="prev, pager, next"
                    :total="page.total"
                    @current-change="pageChange"
                />
            </el-row>
        </el-card>
    </div>
    <el-card>
        <!-- 提醒组件 -->
        <el-dialog
            title="提醒"
            :visible.sync="tipsDialogVisible"
            width="280px"
            center
        >
            <div class="attenInfo">
                <p>系统将通过邮件与短信的形式，对全体员工中存在旷工的考勤进行提醒，该提醒每月仅可发送 1 次。</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSub">我知道了</el-button>
                <el-button @click="centerDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!-- 设置组件 -->
        <attendance-set ref="set" @handleCloseModal="handleCloseModal" /></el-card></div>
</template>

<script>
import attendanceApi from '@/api/constant/attendance'
import { getAttendancesList, updateAttendance } from '@/api/attendances'
import AttendanceSet from './components/attendance-set'
import { getDepartments } from '@/api/departments'
export default {
	name: 'Attendances',
	components: { AttendanceSet },
	data() {
		return {
			list: [],
			selectData: [],
			stateData: attendanceApi,
			departments: [],
			total: 100,
			attendanceRecord: '',
			monthOfReport: '',
			centerDialogVisible: false,
			tipsDialogVisible: false,
			month: '',
			yearMonth: '',
			loading: false,
			attendInfo: {
				month: '',
				getDate: '',
				getInfo: '',
				name: '',
				counts: '',
				tobeTaskCount: ''
			},
			formData: {
				page: 1,
				pagesize: 10,
				keyword: this.keyword,
				deptID: [], // 性别
				stateID: ''
			},
			page: {
				page: 1,
				pagesize: 10,
				total: 0
			},
			modifyData: {
				userId: '',
				day: '',
				adtStatu: ''
			}
		}
	},
	// 创建完毕状态
	created() {
		this.getAttendancesList() // 获取考勤列表
		this.getDepartments() // 获取考勤列表
	},
	methods: {
		// 暂时不处理
		handleSub() {
			this.tipsDialogVisible = false
			this.$message.success('提醒成功')
		},
		handleTip() {
			this.tipsDialogVisible = true
		},
		// 设置
		handleSet() {
			this.$refs.set.dialogFormV()
		},
		// 弹框关闭
		handleCloseModal() {
			this.$refs.set.dialogFormH()
		},
		// 获取组织列表
		async getDepartments() {
			const { depts } = await getDepartments()
			this.departments = depts
		},

		// 初始化数据
		async getAttendancesList() {
			this.loading = true
			const { data, monthOfReport, tobeTaskCount } = await getAttendancesList({ ...this.page })
			this.list = data.rows // 当前记录
			this.page.total = data.total // 总条数
			this.attendInfo.counts = data.total
			this.attendInfo.month = monthOfReport
			this.attendInfo.tobeTaskCount = tobeTaskCount

			var date = new Date()
			var year = date.getFullYear()
			const month = monthOfReport
			var d = new Date(year, month, 0) // 获取月份
			this.monthOfReport = d.getDate() // 获取日期
			this.yearMonth = year + ('' + month < 10 ? '0' + month : month)
			this.month = monthOfReport
			this.loading = false
		},
		// 确定修改
		async  btnOK() {
			await updateAttendance(this.modifyData)
			this.centerDialogVisible = false
			this.getAttendancesList() // 成功之后 重新拉取数据
		},
		// 页码改变
		pageChange(page) {
			this.page.page = page
			this.getAttendancesList() // 获取数据
		},
		showChangeDialog(item, id, it) {
			this.modifyData.userId = item.id
			this.modifyData.day = it.day
			this.modifyData.departmentId = item.departmentId
			this.modifyData.adtStatu = it.adtStatu + '' // 数字转成字符串

			if (it.adtStatu !== '') {
				this.attendInfo.getDate = parseInt(id + 1)
				this.attendInfo.getInfo = it.adtStatu
				this.attendInfo.name = item.name
				this.centerDialogVisible = true
			}
		}
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tableInfo {
    line-height: 36px;
    border: solid 1px #ebeef5;
    border-right: 0 none;
    border-bottom: 0 none;
    tr {
      th {
        height: 50px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
        border-bottom: 2px solid #e8e8e8;
        background: #fafafa;
        min-width:  100px;
      }
      td {
        height: 36px;
        text-align: center;
        border-right: solid 1px #ebeef5;
        border-bottom: solid 1px #ebeef5;
      }
    }
  }

.attenInfo {
  p {
    &.check {
      padding: 20px 0 0;
    }
    .el-radio {
        display: inline-block;
        width: 60px;
        padding: 5px 0;

    }
  }
}
</style>
